<template>
    <div class="AddPatient">
        <div>
            <h2>患者管理</h2>
            <div class="operatingBox">
                <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
            </div>
            <div class="formBox">
                <el-form size="small" class="addForm" :model="formData" ref="formData" :rules="rules">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item prop="type">
                                <span slot="label">
                                    <span class="labelText">类型</span>
                                </span>
                                <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">

                                    <el-option label="公海" value="1"></el-option>
                                    <el-option label="私海" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="name">
                                <span slot="label">
                                    <span class="labelText">患者名称</span>
                                </span>
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item prop="age">
                                <span slot="label">
                                    <span class="labelText">患者年龄</span>
                                </span>

                                <el-input v-model.number="formData.age"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">出生地</span>
                                </span>
                                <el-input v-model="formData.birthPlace"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者职业</span>
                                </span>
                                <el-input v-model="formData.job"></el-input>
                            </el-form-item>
                            <el-form-item prop="idCard">
                                <span slot="label">
                                    <span class="labelText" maxlength="18">身份证号</span>
                                </span>
                                <el-input v-model="formData.idCard"></el-input>
                            </el-form-item>
                            <el-form-item prop="phone">
                                <span slot="label">
                                    <span class="labelText">手机号码</span>
                                </span>
                                <el-input v-model="formData.phone" maxlength="11"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="status">
                                <span slot="label">
                                    <span class="labelText">状态</span>
                                </span>
                                <el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
                                    <el-option label="有效" value="0"></el-option>
                                    <el-option label="无效" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="sex">
                                <span slot="label">
                                    <span class="labelText">患者性别</span>
                                </span>
                                <el-select v-model="formData.sex" placeholder="请选择" style="width: 100%;">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="0"></el-option>
                                </el-select>

                            </el-form-item>
                            <el-form-item prop="birth">
                                <span slot="label">
                                    <span class="labelText">出生年月</span>
                                </span>
                                <!-- <el-date-picker v-model="formData.birth"  placeholder="选择日期"
                                  type="date"  style="width: 100%;">
                                </el-date-picker> -->
                                <el-input v-model="formData.birth" placeholder="2020-01-01" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者民族</span>
                                </span>
                                <el-input v-model="formData.race"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">婚姻状况</span>
                                </span>
                                <el-select v-model="formData.maritalStu" placeholder="请选择" style="width: 100%;">
                                    <el-option label="已婚" value="1"></el-option>
                                    <el-option label="未婚" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="medicareNum">
                                <span slot="label">
                                    <span class="labelText">医保卡号</span>
                                </span>
                                <el-input v-model.number="formData.medicareNum"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者备注</span>
                                </span>
                                <el-input v-model="formData.remark"></el-input>
                            </el-form-item>


                        </el-col>
                    </el-row>
                    <hr>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">联系人</span>
                                </span>
                                <el-input v-model="formData.contact"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">Email</span>
                                </span>
                                <el-input v-model="formData.email"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">手机号码</span>
                                </span>
                                <el-input v-model="formData.contactPhone" maxlength="11"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">微信</span>
                                </span>
                                <el-input v-model="formData.wechat"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <hr>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">国家</span>
                                </span>
                                <el-input v-model="formData.country"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">市</span>
                                </span>
                                <el-input v-model="formData.city"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">地址</span>
                                </span>
                                <el-input v-model="formData.address"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">省</span>
                                </span>
                                <el-input v-model="formData.province"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">区</span>
                                </span>
                                <el-input v-model="formData.district"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">邮编</span>
                                </span>
                                <el-input v-model="formData.zip"></el-input>
                            </el-form-item>

                        </el-col>
                    </el-row>
                    <hr>
                    <el-form-item class="btnBox">
                        <el-button type="primary" size="small" @click="savePatient('formData')">保存</el-button>
                        <el-button type="info" size="small" @click="resetForm('formData')">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>


        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'AddPatient',
    computed: {
        ...mapState("editPatient", ['title', 'rowData'])
    },
    mounted() {

    },
    data() {
        var checkMobile = (rule, value, callback) => {
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
            if (regMobile.test(value)) {
                return callback();
            }
            callback(new Error("请输入合法的手机号"));
        };
        var idCard = (rule, value, callback) => {
            const reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[X])$)$/;
            if (value == '' || value == undefined || value == null) {
                callback();
            } else {
                if ((!reg.test(value)) && value != '') {
                    callback(new Error('请输入正确的身份证号码'));
                } else {
                    callback();
                }
            }
        };
        // var checkDate = (rule, value, callback) => {
        //     const regex = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/;//正则表达式校验
        //     if (!value) {
        //         callback("日期不可为空！");
        //     } else if (!regex.test(value)) {
        //         callback("您输入日期格式不正确！例如：2022-01-01");
        //     } else if (this.checkDate(value) == false) {
        //         callback(new Error("您输入的日期不合法，请确认！"));
        //     } else {
        //         callback();
        //     }

        // }




        return {
            //提示框
            isShow: false,
            //表单数据
            formData: {
                type: "",
                status: "",
                address: "",
                age: "",
                birth: "",
                birthPlace: "",
                city: "",
                contact: "",
                contactPhone: "",
                country: "",
                // description: "",//患者描述
                district: "",
                email: "",
                // id: "",
                idCard: "",
                job: "",
                maritalStu: "",
                medicareNum: "",
                name: "",
                phone: "",
                province: "",
                race: "",
                remark: "",
                sex: "",
                wechat: "",
                zip: "",
                user_id: sessionStorage.getItem("userID"),

            },

            //表单规则
            rules: {
                type: [
                    { required: true, message: '请选择类型', trigger: ['blur', 'change'] }

                ],
                name: [
                    {
                        required: true, message: '请输入患者名称', trigger: 'blur'
                    },
                    { min: 2, message: '长度为2个字符以上', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数字值' }
                ],
                idCard: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                    { validator: idCard, trigger: "blur", },
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkMobile, trigger: "blur", },
                ],
                status: [
                    { required: true, message: '请选择状态', trigger: ['blur', 'change'] },

                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: ['blur', 'change'] },
                ],
                medicareNum: [
                    { required: true, message: '请输入医保卡号', trigger: 'blur' },
                    { type: 'number', message: '卡号必须为数字值' }
                ],
                birth: [
                    { type:"string", required: true, message: '请选择出生日期', trigger: ['blur', 'change'] },
                    // { validator: checkDate, trigger: "blur", },
                ]

            }
        };
    },

    created(){
        this.formData.medicareNum=Date.now()
    },

    methods: {

        //返回按钮
        goBack() {
            this.$router.push("/patient/paManage")
        },

        //保存按钮 -----
        savePatient(formData) {
            this.$refs[formData].validate((valid) => {
                if (valid) {
                    if (this.formData.maritalStu == "已婚") {
                        this.formData.maritalStu = 1
                    } else {
                        this.formData.maritalStu = 0
                    }
                    // this.formData.medicareNum=Date.now()
                    this.formData.user_id = sessionStorage.getItem("userID");                
                    this.$api.patients.addNewPatients(this.formData)
                        .then((res) => {
                            console.log(res);
                            if (res.data.code === 200) {
                                //跳转到列表页面
                                this.$router.push('/patient/paManage')

                                //提示
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            }
                            if(res.data.code === 10011){
                                this.$message({
                                    message: res.data.msg,
                                    type: 'warning'
                                });
                            }
                        }).catch(() => {
                            this.$message.error('添加失败');
                        })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        //取消按钮
        resetForm(formData) {
            //跳转到列表页面
            this.$router.push('/patient/paManage')
            this.$refs[formData].resetFields();
        },

    },
};
</script>

<style scoped>
.AddPatient {
    padding-bottom: 10px;
}

h2 {
    margin: 15px;

}

.select {
    display: flex;
    flex-direction: column;
}

.operatingBox {
    background-color: white;
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.el-button {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.formBox {
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;

}

.el-form {
    margin: 15px;

}


.labelText {
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: black;
}

/* .selectBox {
    display: flex;
    flex-direction: column;
} */

.line {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
    border-bottom: 2px solid rgb(117, 116, 116);
}

.btnBox {
    margin-top: 20px;
    padding-bottom: 20px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
</style>